<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="utf-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="cp" value="${pageContext.request.contextPath}"/>

<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>购物+</title>
  <link href="${cp}/static/css/bootstrap.min.css" rel="stylesheet">
  <link href="${cp}/static/css/style.css" rel="stylesheet">
  <script src="${cp}/static/js/jquery.min.js" type="text/javascript"></script>
  <script src="${cp}/static/js/bootstrap.min.js" type="text/javascript"></script>
  <script src="${cp}/static/js/layer.js" type="text/javascript"></script>
  <link rel="stylesheet" href="${cp}/css/index.css">
  <style type="text/css">
    #div1 img{
      cursor: pointer;
      transition: all 0.6s;
    }
    #div1 img:hover{
      transform: scale(1.3);
    }
    #nav li{
      display: inline-block;
    }
  </style>
</head>
<body>

<!--导航栏-->
<jsp:include page="include/header.jsp"/>

<div class="rightBox">
  <ul class="rightBox-ul">
    <li class="fir">
      <a href="javascript:void(0)"></a>
      <div class="fir-leftBox"></div>
    </li>
    <li class="sec">
      <a href="javascript:;">
        <i></i>
        <div class="con">购物车</div>
        <span id="btn1-add">0</span>
      </a>
      <div class="leftBox">我的购物车</div>
    </li>
  </ul>
</div>
<!-- 控制栏 -->
<div class="container-fluid">
  <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    <div class="col-sm-3 col-md-2 sidebar sidebar-1">
      <ul class="nav nav-sidebar">
        <li class="list-group-item-diy"><a href="/product/productAll.do?type=1">衣服配饰 <span class="sr-only">(current)</span></a></li>
        <li class="list-group-item-diy"><a href="/product/productAll.do?type=2">数码产品</a></li>
        <li class="list-group-item-diy"><a href="/product/productAll.do?type=3">书籍办公</a></li>
        <li class="list-group-item-diy"><a href="/product/productAll.do?type=4">游戏周边</a></li>
        <li class="list-group-item-diy"><a href="/product/productAll.do?type=5">生活用品</a></li>
        <li class="list-group-item-diy"><a href="/product/productAll.do?type=6">化妆用品</a></li>
        <li class="list-group-item-diy"><a href="/product/productAll.do?type=7">运动用品</a></li>
        <li class="list-group-item-diy"><a href="/product/pushProduct.do">添加商品</a></li>
      </ul>
    </div>
    <div class="wrapper" style="margin-top: -50px">
      <div class="imgBox">
        <ul style="list-style: none">
          <c:forEach var="p" items="${product}" varStatus="status">
            <li style="margin-top: 20px">
              <a href="${cp}/product/showProduct.do?pid=${p.pid}">
                <div style="float: left; margin-left: 50px;" id="div1" >
                  <img src="${cp}/static/${p.image}" alt="" width="250px" height="250px" class="img-circle">
                  <dd style="text-align: center; margin-top: 19px; color: #b92c28">${p.pname}</dd>
                  <dd style="text-align: center;">￥：${p.price}</dd>
                </div>
              </a>
              <button class="btn1">加入购物车</button>
            </li>
          </c:forEach>
        </ul>
      </div>
  </div>
</div>

<!--分页代码-->
<div id="nav" style="text-align: center;">
  <c:forEach begin="${page.navigateFirstPage}" end="${page.navigateLastPage}" var="item" step="1">

    <c:if test="${item == page.pageNum}">
      <li class="active">
        <a href="/product/productAll.do?page=${item}&type=${type}">${item}</a>
      </li>
    </c:if>

    <c:if test="${item != page.pageNum}">
      <li>
        <a href="/product/productAll.do?pageNum=${item}&type=${type}">${item}</a>
      </li>
    </c:if>

  </c:forEach>
  <p>每页${page.pageSize}条 ${page.pageNum}/${page.pages}页</p>
</div>
<!--尾部-->
<jsp:include page="include/foot.jsp"/>

  <script src="${cp}/js/jquery.js"></script>
  <script src="${cp}/js/index.js"></script>
</div>
</body>
</html>
